<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit</title>
    <style>
        * {
            /* margin: 0; */
            /* padding: 0; */
            list-style: none;
            box-sizing: border-box;
            -webkit-appearance: none;
        }

        :root {
            --bg_color: #e5dcdc;
            --main_color: #b8a1a1;
            --price_color: red;
        }

        textarea {
            width: 100%;
            height: 800px;
            padding: 12px;
            font-size: 26px;
            font-family: Consolas, Arial, Helvetica, sans-serif, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-weight: bolder;
            background: #3c3939;
            border: 2px solid #8a7979;
            color: #e5dcdc;
        }

        input {
            width: 100%;
            padding: 12px;
            font-size: 26px;
            font-family: Consolas, Arial, Helvetica, sans-serif, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-weight: bolder;
            background: #3c3939;
            color: #e5dcdc;
            border: 2px solid #796b6b;
        }

        #submit_update {
            font-size: 38px;
            background: #000;
            color: #4bb331;
            float: right;
        }

        .aaa>button {
            font-size: 38px;
            background: #0e3458;
            color: #e4a70d;
            width: 33%;
        }

        select,
        option {
            font-size: 30px;
        }
    </style>
</head>

<body style="background: #3c3939;">
    <div style="display: flex; justify-content:space-around;">
        <h2><a href="/" target="_blank" style="color: whitesmoke;">首页</a></h2>
        <h2 id="file_idddd" style="color: #b8a1a1;"></h2>
        <h2 style="color: #40b52e; text-align: center;"> edit.html</h2>

    </div>
    <div class="aaa">
        <button onclick="change_item('pre')">pre_</button>
        <button onclick="change_item('next')">next</button>
        <button onclick="get_file_level_400_500_function()"> get file level 400 500 </button>
    </div>
    <h1 id="title" style="color: #e5dcdc;"></h1>
    <div style="height: 350px;"></div>
    <pre id="pre_show_area" style="color: #e5dcdc; font-size: 30px; font-weight: bolder;"></pre>
    <div class="aaa">
        <button onclick="set_level(100)"> set level 100</button>
        <button onclick="set_level(200)"> set level 200</button>
        <button onclick="set_level(500)"> set level 500</button>
    </div>
    <input type="text"> <br> <br>
    <div>
        <select id="select">
            <option>nulll</option>
            <option>100</option>
            <option>200</option>
            <option>300</option>
            <option>400</option>
            <option>500</option>
        </select>
    </div>
    <button onclick="submit_update()" id="submit_update">submit_update</button>
    <textarea id="text_area"></textarea>


    <br><br><br><br><br><br><br><br><br><br><br><br>
    <button onclick="delete_this_item()" style="font-size: 32px; background: red; color: white;">delete this item </button>
    <br><br><br><br><br><br><br><br><br><br><br><br>
</body>
<script>


    let title = '{{ title|safe }}';
    // console.log(title);

    let get_file_level_400_500 = '{{ get_file_level_400_500|safe }}';
    console.log(get_file_level_400_500);

    // file_id
    let file_id = '{{ file_id|safe }}';
    console.log("current file id :  " + file_id);
    document.getElementById("file_idddd").innerText = file_id;

    let pre_item_file_id = '{{ pre_item_file_id|safe }}';
    console.log("pre file id :  " + pre_item_file_id);

    let next_item_file_id = '{{ next_item_file_id|safe }}';
    console.log("next file id :  " + next_item_file_id);



    let all_content = '{{ all_content|safe }}';
    // console.log(all_content);
    let real_content = all_content.substring(1, all_content.length - 1);
    // console.log(real_content);

    let split_str = "===================us6oQEaVioXlcSTf0Ju85pxtCMZofElWcfPRjY8y6CfkcveyuQUn4iYr==================="
    let string_dataaaaaa = real_content.split(split_str)[0].trim();
    let select_valueeeee = real_content.split(split_str)[1].trim();
    console.log(string_dataaaaaa);
    console.log(select_valueeeee);

    let result = string_dataaaaaa.replace(/[\u4e00-\u9fa5]/g, ' ');
    result = result.replace(/\n/g, "  ");
    result = result.replace(/\d+/g, ' ');
    console.log(result);
    document.getElementById("title").innerText = result;

    document.getElementById("text_area").value = string_dataaaaaa;
    document.getElementById("pre_show_area").innerText = string_dataaaaaa;
    document.getElementById("select").value = select_valueeeee;

    var textarea = document.querySelector('textarea');
    textarea.addEventListener('input', (e) => {
        textarea.style.height = '100px';
        textarea.style.height = (e.target.scrollHeight + 20) + 'px';
    });

    function get_file_level_400_500_function(params) {
        window.location.href = "/edit?file_id=" + get_file_level_400_500;
    }

    function delete_this_item(params) {
        let url = "/delete/";
        let method = 'POST';
        // let method='GET';
        let postObj = {
            file_id: file_id,
        };
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
        xhr.send(JSON.stringify(postObj));
        xhr.onload = function () {
            if (xhr.status === 200) {
                if (xhr.responseText === 'success') {
                    alert("delete success !!! ")
                    // alert("success");
                    // location.reload();
                    history.back();
                }
            }
        }
    }

    function change_item(eee) {
        if (eee === "pre") {
            window.location.href = "/edit?file_id=" + pre_item_file_id;
        }
        if (eee === "next") {
            window.location.href = "/edit?file_id=" + next_item_file_id;
        }

    }

    function set_level(eee) {
        document.getElementById("select").value = eee;
        submit_update();
    }

    function submit_update() {
        let myselect = document.getElementById("select");
        let index = myselect.selectedIndex;
        let select_value = myselect.options[index].text;
        if (select_value == "nulll") { alert("select 内容不符合"); return false; }

        let text_area_str = document.getElementById("text_area").value;
        if (text_area_str.length < 10) { alert("textarea 内容不符合"); return false; }
        let url = "/update/";
        let method = 'POST';
        // let method='GET';
        let postObj = {
            string_data: text_area_str,
            select_value: select_value,
            file_id: file_id,
        };
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
        xhr.send(JSON.stringify(postObj));
        xhr.onload = function () {
            if (xhr.status === 200) {
                if (xhr.responseText === 'success') {
                    // alert("success");
                    location.reload();
                    // history.back();
                }
            }
        }
    }
</script>

</html>